import React from 'react'
import Chart from "react-apexcharts";
import {Card} from "reactstrap";

const Age = React.memo(props => {

  const data = {
    options: {
      chart: {
        sparkline: { enabled: false },
        toolbar: { show: false },
      },
      states: {
        hover: {
          filter: {
            type: 'none',
            show: false
          }
        }
      },
      colors: [
        props.labelColor,
        props.labelColor,
        props.primary,
        props.labelColor,
        props.labelColor,
        props.labelColor
      ],
      grid: {
        show: false
      },
      dataLabels: {
        enabled: false
      },
      plotOptions: {
        bar: {
          columnWidth: "60%",
          distributed: true,
          endingShape: "rounded"
        }
      },
      tooltip: {
        x: { show: false }
      },
      xaxis: {
        categories: ['14-18', '18-24', '24-30', '30-40', '40-50', 'N/A'],
        axisBorder: {
          show: false,
        },
        axisTicks: {
          show: false,
        },
      },
      yaxis: {
        show: false
      },
      legend: {
        show: false
      },
    },
    series: [
      {
        name: "",
        data: props.age.map(item => item.count)
      }
    ]
  }

  return (
    <Card className={`analytics-card ${props.bgColor}`}>
      <div className="analytics-card__header">
        <div className="analytics-card__title">Возраст</div>
      </div>
      <div className="age-card__content">
        <Chart
          options={data.options}
          series={data.series}
          type="bar"
          height={239}
        />
      </div>
    </Card>
  )
})

export default Age
